{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1-dist/css/bootstrap.min.css' %}">
    <style>
        .account {
            width: 400px;
            border: 1px solid #dddddd;
            border-radius: 5px;
            box-shadow: 5px 5px 20px #aaa;

            margin-left: auto;
            margin-right: auto;
            margin-top: 100px;
            padding: 20px 40px;
        }

        .account h2 {
            margin-top: 10px;
            text-align: center;
        }
    </style>
</head>
<body>
<div class="account">
    <h2>用户管理系统</h2>
    <form method="post" novalidate>
        {% csrf_token %}
        <div class="form-group">
            <label>用户名</label>
            {{ form.username }}
            <span style="color: red;">{{ form.username.errors.0 }}</span>
        </div>
        <div class="form-group">
            <label>密码</label>
            {{ form.password }}
            <span style="color: red;">{{ form.password.errors.0 }}</span>
        </div>
        <div class="form-group">
            <label for="id_code">图片验证码</label>
            <div class="row">
                <div class="col-xs-7">
                    <input type="text" name="code" class="form-control" placeholder="输入验证码" onclick="changeIamge(this)">
                    {{ form.code }}
                    <span style="color: red;">{{ form.code.errors.0 }}</span>
                </div>
                <div class="col-xs-5">
                    <img id="image_code" src="/image/code/" style="width: 125px;">
                </div>
            </div>
        </div>
        <input type="submit" value="登 录" class="btn btn-primary">
    </form>
</div>

</body>
</html>

{#<!DOCTYPE html>#}
{#<html lang="en">#}
{#<head>#}
{#    <meta charset="UTF-8">#}
{#    <meta name="viewport" content="width=device-width, initial-scale=1.0">#}
{#    <title>Document</title>#}
{#    <style>#}
{#        * {#}
{#            margin: 0;#}
{#            padding: 0;#}
{#        }#}
{#        html {#}
{#            height: 100%;#}
{#        }#}
{#        body {#}
{#            height: 100%;#}
{#        }#}
{#        .container {#}
{#            height: 100%;#}
{#            background-image: linear-gradient(to right, #9b9399, #a6c1ee);#}
{#        }#}
{#        .login-wrapper {#}
{#            background-color: #fff;#}
{#            width: 358px;#}
{#            height: 588px;#}
{#            border-radius: 15px;#}
{#            padding: 0 50px;#}
{#            position: relative;#}
{#            left: 50%;#}
{#            top: 50%;#}
{#            transform: translate(-50%, -50%);#}
{#        }#}
{#        .header {#}
{#            font-size: 38px;#}
{#            font-weight: bold;#}
{#            text-align: center;#}
{#            line-height: 200px;#}
{#        }#}
{#        .input-item {#}
{#            display: block;#}
{#            width: 100%;#}
{#            margin-bottom: 20px;#}
{#            border: 0;#}
{#            padding: 10px;#}
{#            border-bottom: 1px solid rgb(128, 125, 125);#}
{#            font-size: 15px;#}
{#            outline: none;#}
{#        }#}
{#        .input-item:placeholder {#}
{#            text-transform: uppercase;#}
{#        }#}
{#        .btn {#}
{#            text-align: center;#}
{#            padding: 10px;#}
{#            width: 100%;#}
{#            margin-top: 40px;#}
{#            background-image: linear-gradient(to right, #a6c1ee, #8a7e87);#}
{#            color: #fff;#}
{#        }#}
{#        .msg {#}
{#            text-align: center;#}
{#            line-height: 88px;#}
{#        }#}
{#        a {#}
{#            text-decoration-line: none;#}
{#            color: #abc1ee;#}
{#        }#}
{#    </style>#}
{#</head>#}
{#<body>#}
{#    <div class="container">#}
{#        <div class="login-wrapper">#}
{#            <div class="header">用户系统</div>#}
{#            <div class="form-wrapper">#}
{#                <input type="text" name="username" placeholder="请输入用户名" class="input-item">#}
{#                <input type="password" name="password" placeholder="请输入密码" class="input-item">#}
{#                <input type="text" name="code" class="input-item" placeholder="输入验证码">#}
{#                            {{ form.code }}#}
{#                <div class="form-group">#}
{#                    <label for="id_code">图片验证码</label>#}
{#                    <div class="row">#}
{#                        <div class="col-xs-7">#}
{#                            <input type="text" name="code" class="input-item" placeholder="输入验证码">#}
{#                            {{ form.code }}#}
{#                            <span style="color: red;">{{ form.code.errors.0 }}</span>#}
{#                        </div>#}
{#                        <div class="col-xs-5">#}
{#                            <img id="image_code" src="/image/code/" style="width: 125px;">#}
{#                        </div>#}
{#                </div>#}
{#                <div class="btn">Login</div>#}
{#            </div>#}
{#            <div class="msg">#}
{#                Don't have account?#}
{#                <a href="#">Sign up</a>#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#</body>#}
{#</html>#}
